import { Box } from "@mui/system";
import { UploadFile } from "antd";
import { Mask, SpinLoading } from "antd-mobile";
import { CloseOutline } from "antd-mobile-icons";
import { UploadFileStatus } from "antd/es/upload/interface";
import React, { PropsWithChildren, useCallback, useState } from "react";
export interface PreviewWrapperProps extends PropsWithChildren {
  deleteIcon?: React.ReactNode;
  onRemove?: () => void;
  onViewFile?: () => void;
  maskStatus?: UploadFileStatus;
}
const PreviewWrapper = ({ deleteIcon = <CloseOutline style={{ position: "absolute", left: 4, top: 2 }} />, maskStatus, onViewFile, onRemove, children }: PreviewWrapperProps) => {
  return (
    <Box
      className={"preview-wrapper-root"}
      sx={{
        display: "inline",
        borderRadius: 1,
        overflow: "hidden",
        height: "100%",
        mr: 1,
        mb: 1,
        position: "relative",
        boxSizing: "border-box",
        borderWidth: "1px",
        borderStyle: "solid",
        borderColor: maskStatus == "error" ? "#ff0000" : "transparent",
        ".adm-mask": {
          position: "absolute",
        },
      }}
    >
      <Mask visible={maskStatus == "uploading"} opacity={"thin"} />
      {maskStatus == "uploading" ? <SpinLoading color='white' style={{ position: "absolute", zIndex: 1001, left: "50%", top: "50%", transform: "translate(-50%,-50%)" }}></SpinLoading> : null}
      <Box
        onClick={() => {
          onViewFile && onViewFile();
        }}
      >
        {children}
      </Box>
      {
        <Box
          onClick={() => {
            onRemove && onRemove();
          }}
          sx={{
            position: "absolute",
            top: 0,
            display: onRemove ? undefined : "none",
            right: 0,
            width: 14,
            height: 14,
            color: "white",
            backgroundColor: "rgba(0, 0, 0, 0.7)",
            borderRadius: "0 1px 0 12px",
            fontSize: 8,
          }}
        >
          {deleteIcon}
        </Box>
      }
    </Box>
  );
};

export default PreviewWrapper;
